<template>
  <div>
    <div class="nav min_wrapper_1200">
      <div class="navCon wrapper_1200 acea-row row-between-wrapper">
        <div class="textPic acea-row row-middle">
          <div class="icon" @click="goHome">
            <img :src="$store.state.logoUrl">
          </div>
          <div class="list">
            <nuxt-link :to="item.url" class="item" :class="{ 'font-color': item.url === $route.path }" v-for="(item, index) in headerList" :key="index">{{item.name}}</nuxt-link>
          </div>
        </div>
        <div class="search acea-row row-between-wrapper">
          <div class="text"><span class="iconfont icon-xiazai5"></span><input type="text" @keydown.enter.stop="search" v-model="searchVal"></div>
          <div class="bnt bg-color" @click="search">搜索</div>
        </div>
      </div>
    </div>
    <div class="goodsSearch wrapper_1200">
      <div class="title">
        <nuxt-link to="/">首页 > </nuxt-link>{{ searchVal }}
      </div>
      <div class="search-store acea-row" v-if="storeList.length > 0">
        <ul class="store-count" :class="storeList.length == 2 ? 'moreStore' : ''">
          <li class="item acea-row" v-for="(item, index) in storeList" :key="index">
            <div class="store-name acea-row">
              <div class="image">
                <img :src="item.mer_avatar" alt="">
              </div>
              <div class="name">
                {{ item.mer_name }}
                <span>{{ item.care_count < 10000 ? item.care_count : (item.care_count/10000).toFixed(1)+'万'  || 0  }}人关注</span>
              </div>
            </div>
            <div class="store-go acea-row">
              <button class="store-btn goIn" @click="goStore(item.mer_id)">进店逛逛</button>
            </div>
          </li>
        </ul>
        <nuxt-link v-if="storeLength" :to="{path:'/shop_more',query:{title:searchVal}}" class="moreBtn">
          更<br/>多<br/>店<br/>铺
          <span class="iconfont icon-you"></span>
        </nuxt-link>
      </div>
      <div class="navCount" :class="is_showMore ? 'showMore' : ''">
        <div class="navCon wrapper_1200 acea-row">
          <div class="name">品牌：</div>
          <div class="lists brandList" v-if="is_multiple">
            <el-checkbox-group v-model="checkedBrands">
              <template v-for="(item, index) in brandList">
                <el-checkbox :label="item.brand_id" :key="index" v-if="item.brand_id">{{item.brand_name}}</el-checkbox>
              </template>
            </el-checkbox-group>
            <div slot="footer" class="select-footer">
              <el-button type="primary" @click.native="bindSubmit" size="mini">确 定</el-button>
              <el-button @click="handleClose" size="mini">取 消</el-button>
            </div>
          </div>
          <div class="lists acea-row row-middle" v-if="!is_multiple">
            <div class="items" :class="current===index?'font-color':''" v-for="(item, index) in brandList" :key="index" @click="category(index)">{{item.brand_name}}</div>
          </div>
          <div class="moreCon">
            <div class="more">
              <span class="multiBtn" @click="is_multiple = !is_multiple">{{ is_multiple ? "单选" : "多选" }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="wrapper sort-count">
        <div class="sort acea-row">
          <div class="name">排序：</div>
          <div class="acea-row">
            <div class="items" :class="iSdefaults === 0?'font-color':''" @click="defaults">默认</div>
            <div class="items" :class="iSdefaults === 1?'font-color':''" @click="salesSort('sales')">
              销量
            </div>
            <div class="items" :class="iSdefaults === 3?'font-color':''" @click="salesRate('rate')">
              评分
            </div>
            <div class="items" :class="iSdefaults === 2?'font-color':''" @click="priceSort('price_desc')" v-if="priceOrder === 'price_asc'">
              价格
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiageshaixuanshang"></use>
              </svg>
            </div>
            <div class="items" :class="iSdefaults === 2?'font-color':''" @click="priceSort('price_asc')" v-else-if="priceOrder === ''">
              价格
              <span class="iconfont icon-jiageshaixuan"></span>
            </div>
            <div class="items" :class="iSdefaults === 2?'font-color':''" @click="priceSort('price_asc')" v-else>
              价格
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiageshaixuanxia"></use>
              </svg>
            </div>
            <div class="items price-range">
              <div class="price-count">
                <el-input class="input" v-model.number="price_on"></el-input> -
                <el-input class="input" v-model.number="price_off"></el-input>
              </div>
              <div class="action-box">
                <span class="action-btn clear" @click="clearPrice">清空</span>
                <span class="action-btn submit" @click="getProductslist('')">确定</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="productslist.length">
        <div class="list acea-row row-middle">
          <div class="item" v-for="(item, index) in productslist" :key="index" @click="goDetail(item)">
            <div class="pictrue">
              <img :src="item.image">
              <div v-if="item.stock==0" class="sell_out">已售罄</div>
              <div v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></div>
            </div>
            <div class="top acea-row row-between-wrapper">
              <div v-if="item.show_svip_info.show_svip_price && item.svip_price" class="svip acea-row">
                <span class="font-color">¥{{item.svip_price}}</span>
                <img src="@/assets/images/svip.png">
              </div>
              <div v-else>
                <span class="font-color">¥{{item.price}}</span>
              </div>
              <div class="label" v-if="item.issetCoupon">券</div>
            </div>
           
            <div class="info line2"> <span v-if="item.merchant.is_trader" class="trader">自营</span> {{item.store_name}}</div>
            <div class="bottom acea-row row-between-wrapper">
              <span>{{item.sales}}人付款</span>
              <span>{{item.rate}}分</span>
            </div>
          </div>
        </div>
        <el-pagination v-if="total > 0" background layout="prev, pager, next" :total="total" :pageSize="limit" @current-change="bindPageCur"></el-pagination>
      </div>
      <div v-if="!productslist.length && noProduct">
        <div class="noCart">
          <div class="pictrue"><img src="../assets/images/noCart.png"></div>
          <div class="tip">抱歉，没有找到您搜索的相关商品~</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
export default {
      name: "goods_search",
      auth: false,
      components:{},
      data(){
        return{
          headerList:[],
          searchVal:'',
          brandList:[],
          brandCurrent:[],
          productslist:[],
          noProduct: false,
          current:0,
          moreCurrent:0,
          seen:false,
          erCurrent:0,
          iSdefaults:0,
          storeList: [],
          pullRefreshss: true, // 代表可以进行下拉加载，false代表不能
          page: 1, //代表页面的初始页数
          limit:20,
          scollY: null,// 离底部距离有多少
          total: 0, //总页数
          title:'下拉加载更多',
          cid:0,//一级分类
          sid:'',//二级分类
          order: '',
          priceOrder: '',
          price_on: '',
          price_off: '',
          news:0,
          is_multiple: false,
          checkedBrands: [],
          is_showMore: true,
          storeLength: false,
        }
      },
      async asyncData({app,query}){
        return {
          sid: query.sid ? query.sid:'',
        }
      },
      watch:{
        $route: {
          handler: function(newVal, oldVal){
            this.keyword = newVal.query.title ? newVal.query.title : '';
            this.sid = newVal.query.sid ? newVal.query.sid : '';
            this.page = 1;
            this.getStoreList();
            this.getProductslist(1);
          },
          // 深度观察监听
          deep: true
        },
        searchVal: {
          immediate: true,
          handler: function(newVal, oldVal) {
            this.keyword = newVal ? newVal : oldVal
          }
        },
        is_multiple(n){
          this.checkedBrands = [];
          if(!n) {
            this.current = 0;
          }
        },
      },
      fetch({ store}) {
        store.commit('isHeader', true);
        store.commit('isFooter', true);
      },
      head() {
        return {
          title: "商品搜索-"+this.$store.state.titleCon
        }
      },
      beforeMount(){
        this.searchVal = this.searchVal ? this.searchVal : this.$route.query.title ? this.$route.query.title : '';
        this.keyword = this.searchVal ? this.searchVal : this.$route.query.title ? this.$route.query.title : '';
        this.getProductslist('');
        this.getStoreList();
        this.getBrandList();
      },
      mounted(){
        // this.pullRefresh();
      },
      beforeDestroy() {
        window.onscroll = null;
      },
      methods:{
        goHome(){
          this.$router.push({path: '/'});
        },
        goDetail: function (item) {
          if(item.product_type == 1){
            this.$router.push({ path: '/goods_seckill_detail/'+item.product_id, query: { time: item.stop_time,status: item.seckill_status } });
          }else{
            this.$router.push({ path: '/goods_detail/'+item.product_id });
          }
        },
        /**获取品牌*/
        getBrandList(){
          let _this = this;
          _this.$axios.get('/api/store/product/brand/lst',{
            params:{limit: 999,keyword: _this.keyword, pid: _this.sid}
          }).then(function (res) {
            _this.brandList = res.data.list
            _this.brandList.unshift({
              'brand_id': '',
              'brand_name': '全部'
            })
          }).catch(function (err) {
            _this.$message.error(err);
          })
        },
        bindSubmit(){
          this.titleName = "";
          this.getProductslist('');
        },
        handleClose(){
          this.checkedBrands = [];
          this.searchVal = "";
        },
        /**进店逛逛 */
        goStore: function(id){
          this.$router.push({ path: `/store?id=${id}` });
        },
        // 分页点击
        bindPageCur(data){
          this.page = data
          this.getProductslist('');
        },
        clearPrice(){
          this.price_on = this.price_off = "";
        },
        search(){
          this.keyword = this.searchVal
          // if(this.searchVal.trim()!==''){
            this.productslist = [];
            this.page = 1;
            this.getStoreList();
            this.getProductslist(1);
          // }else {
          //   this.$message.error("请输入要搜索的内容");
          // }
        },
        //点击品牌搜索
        category(index){
          this.checkedBrands = [];
          this.current = index;
          this.moreCurrent = index;
          this.brandCurrent = this.brandList[index].children;
          this.titleName = this.brandList[index].cate_name;
          this.productslist = [];
          this.page = 1;
          this.erCurrent = 0;
          this.order = '';
          this.checkedBrands[0] = this.brandList[index]['brand_id'];
          this.getProductslist();
        },
        /**店铺列表 */
        getStoreList(){
          let _this = this;
          _this.$axios.get('/api/store/merchant/lst',{
            params:{
              keyword: _this.keyword,
              page: 1,
              limit: 3
            }
          }).then(function (res) {
            _this.storeList = res.data.list;
            _this.storeLength = res.data.list.length >= 2 ? true : false;
            if(_this.storeLength)_this.storeList.length = 2;
          }).catch(function (err) {
            _this.$message.error(err);
          })
        },
        getProductslist(num){
          let _this = this;
          _this.page = num ? num : _this.page;
          let currentPage = {page: _this.page,limit:_this.limit,keyword: _this.keyword,brand_id: _this.checkedBrands.toString(),
           price_on: _this.price_on,price_off: _this.price_off,order: _this.order,cate_pid: _this.sid, common: 1};
          _this.$axios.get('/api/product/spu/lst', {
            params: currentPage
          }).then(function (res) {
            _this.total = res.data.count;
            _this.productslist = res.data.list;
            _this.noProduct = res.data.list.length ? false : true;
          }).catch(function (err) {
            console.log(err)
          })
        },
        defaults(){
          this.total = 0;
          this.iSdefaults = 0;
          this.productslist = [];
          this.page = 1;
          this.order = '';
          this.priceOrder = '';
          this.getProductslist('');
        },
        priceSort(sort){
          this.total = 0;
          this.iSdefaults = 2;
          this.productslist = [];
          this.page = 1;
          this.order = sort;
          this.priceOrder = sort;
          this.getProductslist('');
        },
        salesSort(sort){
          this.total = 0;
          this.iSdefaults = 1;
          this.productslist = [];
          this.page = 1;
          this.order = sort;
          this.priceOrder = '';
          this.getProductslist('');
        },
        salesRate(rate){
          this.total = 0;
          this.iSdefaults = 3;
          this.productslist = [];
          this.page = 1;
          this.order = rate;
          this.priceOrder = '';
          this.getProductslist('');
        }
      }
    }
</script>

<style scoped lang="scss">
  .trader{
    color: #fff;
    background-color: #e93323;
    display: inline-block;
    width: 32px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 2px;
    margin-right: 5px;
    font-size: 12px;
  }

  .nav{
    width: 100%;
    height: 96px;
    background: #FFFFFF;
    .navCon{
      height:100%;
      .textPic{
        height: 100%;
        .icon{
          cursor: pointer;
          width: 112px;
          height: 40px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .list{
          margin-left: 85px;
          .item{
            padding: 15px 10px;
            margin-right: 13px;
            color: #282828;
            font-size: 16px;
            font-weight: 400;
            cursor: pointer;
            &:hover{
              color: #E93323;
            }
          }

        }
      }
      .search{
        width: 360px;
        height: 40px;
        border: 1px solid #E93323;
        border-radius: 2px;
        cursor: pointer;
        .text{
          width: 290px;
          padding-left: 14px;
          color: #C1C1C1;
          input{
            width: 250px;
            height: 36px;
            border:none;
            outline: none;
            padding-left: 10px;
            margin-top: -2px;
          }
          .iconfont{
            font-size: 15px;
            margin-right: 5px;
          }
        }
        .bnt{
          width: 64px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          color: #fff;
        }
      }
    }
  }


  .el-checkbox{
    height: 50px;
    line-height: 50px;
    color: #282828;
  }
  .title{
    color: #999999;
    height: 46px;
    line-height: 46px;
    .home{
      color: #282828;
    }
  }
  .sort-count{
    width: 1200px;
    margin: 0 auto;
  }
  .wrapper{
    background-color: #fff;
    padding: 25px 17px;
    cursor: pointer;
    .list{
      width: 1100px;
      border-bottom: 1px dotted #EFEFEF;
      padding-bottom: 10px;
      .item{
        margin-right: 30px;
        margin-bottom: 10px;
        &:hover{
          color: #E93323;
        }
      }
    }

    .sort{
      .items{
        margin-right: 30px;
        &:hover{
          color: #E93323;
        }
        .icon{
          font-size: 15px;
          margin-left: 5px;
        }
        .iconfont{
          font-size: 15px;
          color: #E2E2E2;
          margin-left: 5px;
        }
      }
      .name{
        color: #969696;
        margin-right: 20px;
      }
    }
  }
  .price-range{
    position: relative;
    top: -15px;
    padding: 10px;
    &:hover{
      box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
      .action-box{
        display: block;
      }
    }
    .action-box{
      display: none;
      position: absolute;
      left: 0;
      bottom: -50px;
      text-align: center;
      background: #F9F9F9;
      height: 50px;
      line-height: 50px;
      width: 100%;
      box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
      padding: 0 15px;
      overflow: hidden;
      .clear{
        float: left;
        color: #999999;
      }
      .submit{
        float: right;
        color: #666666;
        width: 60px;
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
        background-color: #F1F1F1;
        border-radius: 2px;
        border: 1px solid #D4D4D4;
      }

    }
    .price-count{
      .input{
        width: 80px;
        height: 32px;
        position: relative;

        &:before{
          content: '¥';
          display: inline-block;
          color: #D4D4D4;
          position: absolute;
          left: 5px;
          top: 0;
          line-height: 32px;
        }
        /deep/ .el-input__inner{
          height: 32px;
          line-height: 32px;
          padding-left: 18px;
        }
      }
    }
  }
  .search-store{
    width: 1200px;
    margin: 0 auto 20px;
    border-radius: 4px;
    overflow: hidden;
    .moreBtn{
      width: 32px;
      height: 76px;
      padding: 10px 0;
      background-color: #fff;
      color: #999999;
      text-align: center;
      font-size: 12px;
      float: left;
      .iconfont{
        display: block;
        font-size: 8px;
        border: 1px solid #8B8B8B;
        border-radius: 100%;
        width: 11px;
        height: 11px;
        line-height: 11px;
        text-align: center;
        margin: 3px auto 0;
      }
    }
    .store-count{
      overflow: hidden;
      width: 100%;
      .item{
        height: 96px;
        width: 100%;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        padding: 0 17px;
        background-color: #fff;
      }
      &.moreStore{
        float: left;
        width: auto;
        .item{
          width: 570px;
          float: left;
          margin-right: 14px;
        }
      }
      .store-name{
        align-items: center;
        .image{
          width: 61px;
          height: 61px;
          border-radius: 100%;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .name{
          margin-left: 15px;
          color: #282828;
          line-height: 26px;
          >span{
            display: block;
            color: #999999;
          }
        }
      }
      .store-go{
        align-items: center;
        .store-btn{
          width: 78px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 4px;
          font-size: 12px;
          &.goIn{
            color: #fff;
            background-color: #E93323;
            margin-right: 12px;
            border: 1px solid #E93323;
          }
          &.collect{
            color: #E93323;
            border: 1px solid #E93323;
            background-color: #fff;
          }
          &.hasCollect{
            color: #999999;
            border-color: #999999;
          }
        }
      }

    }
  }
  .goodsSearch{
    .title{
      height: 60px;
      line-height: 60px;
      color: #999999;
      .home{
        color: #282828;
        font-size: 14px;
      }
    }
    .list{
      width: 1250px;
      margin-top: 20px;
      .item{
        padding: 16px;
        width: 224px;
        height: 340px;
        background-color: #fff;
        margin: 0 20px 20px 0;
        cursor: pointer;
        &:hover{
          box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
        }
        .svip{
          align-items: center;
          margin-top: 3px;
          img{
            width: 35px;
            height: 15px;
            margin: 4px 0 0 7px;
          }
        }
        .pictrue{
          width: 192px;
          height: 192px;
          position: relative;
          .sell_out {
            display: flex;
            width: 76px;
            height: 76px;
            align-items: center;
            justify-content: center;
            border-radius: 100%;
            background: rgba(0,0,0,.6);
            color: #fff;
            font-size: 12px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -38px 0 0 -38px;
            &::before{
              content: "";
              display: block;
              width: 68px;
              height: 68px;
              border-radius: 100%;
              border: 1px dashed #fff;
              position: absolute;
              top: 3px;
              left: 3px;
            }
          }
          .border-picture {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: center/cover no-repeat;
          }
          img{
            width: 100%;
            height: 100%;
          }
        }
        .top{
          margin-top: 16px;
          .font-color{
            font-size: 22px;
            font-weight: bold;
          }
          .y_money{
            font-size: 12px;
            color: #AAAAAA;
            text-decoration: line-through;
            margin-left: 8px;
          }
          .label{
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background: linear-gradient(330deg, rgba(231, 85, 67, 0.14) 0%, rgba(244, 103, 83, 0.14) 100%);
            font-size:12px;
            color: #E93323;
          }
        }
        .info{
          margin-top: 8px;
          color: #5A5A5A;
          height: 40px;
        }
        .bottom{
          font-size: 12px;
          color: #AAAAAA;
          margin-top: 10px;
        }
      }
    }
    .noCart{
      text-align: center;
      margin-bottom: 70px;
      .pictrue{
        width: 216px;
        height: 136px;
        margin: 0 auto;
        img{
          width: 100%;
          height: 100%;
        }
        .tip{
          margin-top: 12px;
          color: #646464;
        }
      }
    }
  }
  .navCount{
    width: 100%;
    height: 50px;
    &.showMore{
      height: auto;
      .lists{
        height: auto;
      }
    }
    cursor: pointer;
    .navCon{
      padding: 0 17px;
      position: relative;
      &:after{
        content: '';
        display: inline-block;
        position: absolute;
        width: 1140px;
        border-bottom: 1px dotted #EFEFEF;
        bottom: 0;
        left: 60px;
      }
      &.wrapper_1200{
        overflow: unset!important;
        background-color: #fff;
      }
      height: 100%;
      .name{
        color: #969696;
        margin-right: 20px;
        line-height: 50px;
      }
      .moreCon{
        position: relative;
        height: 50px;
        .moreCategory{
          padding: 44px 44px 16px 44px;
          position: absolute;
          top:50px;
          right: -17px;
          width: 1200px;
          background-color: #fff;
          box-shadow: 0 3px 16px rgba(0, 0, 0, 0.06);
          .item{
            margin: 0 40px 28px 0;
            &:hover{
              color: #E93323;
            }
          }
        }
        .multiBtn{
          display: inline-block;
          width: 38px;
          height: 18px;
          line-height: 18px;
          border: 1px solid #C8C8C8;
          text-align: center;
          border-radius: 2px;
          margin-right: 18px;
        }
      }
      .lists{
        height: 100%;
        width: 1020px;
        overflow: hidden;
        margin-right: 10px;
        .items{
          line-height: 50px;
          overflow: hidden;
          margin-right: 40px;

          &:hover{
            color: #E93323;
          }
        }
      }
      .more{
        position: relative;
        line-height: 50px;
        text-align: center;
        .iconfont{
          margin-left: 6px;
          font-size: 12px;
          color: #666666;
          display: inline-block;
          transition: all .1s ease;
          &.shouqi{
            -moz-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            transform: rotateX(180deg);
          }
        }
      }
    }
  }
  .select-footer{
    text-align: center;
    margin: 30px 0;
  }
</style>
